<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap 官方指南</title>
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
            crossorigin="anonymous">
        <!-- <link rel="stylesheet" href="../../css/bootstrap_replace.css"> -->
    </head>
    <body class="container-fluid">
        <ul class="nav nav-tabs nav-pills nav-justified">
            <li class="nav-item"><a href="#" class="nav-link">主页</a></li>
            <li class="nav-item"><a href="#" class="nav-link active">编辑</a></li>
            <li class="nav-item"><a href="#" class="nav-link">工具</a></li>
            <li class="nav-item"><a href="#" class="nav-link">关于</a></li>
            <li class="nav-item dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    消息<span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">系统消息</a></li>
                    <li><a href="#">私人消息</a></li>
                    <li class="divider"></li>
                    <li><a href="#">优惠券信息</a></li>
                    <li><a href="#">事件信息</a></li>
                </ul>
            </li>
            <li class="nav-item disabled"><a href="#" class="nav-link">个人信息</a></li>
        </ul>
        <h1>Hello boy!</h1>

        <div class="container-fluid border-black">
            <p>总宽度12列，使用col-sm-* col-md-* 来在各种设备上显示不同宽度比例</p>
            <div class="row">
                <div class="col-sm-3 col-md-6 bg-primary">
                    <p>小型屏幕(平板电脑)显示宽度<kbd>3/12</kbd>，中型屏幕(PC)显示宽度<kbd>6/12</kbd></p>
                </div>
                <div class="col-sm-9 col-md-6 bg-secondary">
                    <p>小型屏幕(平板电脑)显示宽度<kbd>9/12</kbd>，中型屏幕(PC)显示宽度<kbd>6/12</kbd></p>
                </div>
            </div>
        </div>

        <div class="btn-group mt-5 pt-5 bg-dark rounded-top shadow-lg" style="width: 300px;height: 60px;">
            <input type="text" class="input-group-text dropdown-toggle border-light align-content-lg-start" data-toggle="dropdown" style="width: 280px;height: 56px;"></button>
        </div>

        <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
            crossorigin="anonymous"></script>
        <script
            src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
            integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
            crossorigin="anonymous"></script>
        <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js"
            integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa"
            crossorigin="anonymous"></script>
    </body>
</html>